require('./PageDgzsedit.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,CellsTitle,Label,Input,Page, Panel,PanelHeader,
  PanelBody, PanelFooter,ButtonArea, MediaBox,Cells, Cell,CellHeader,
  MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,MediaBoxBody,InfiniteLoader,
  MediaBoxInfo,MediaBoxInfoMeta,Dialog,Toptips,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea} from  'react-weui/build/packages'
import zb  from './../../../assets/icon/zhzj/坐标.png';
import tp  from './../../../assets/icon/zhzj/图片.png';
import ht  from './../../../assets/icon/zhzj/话筒.png';
import gz from './../../../assets/icon/zhzj/故障.png'
import sh  from './../../../assets/icon/zhzj/损坏.png';
import test  from './../../../assets/img/10220215.png';
import yuanlinlvhua  from './../../../assets/img/园林绿化.png';
import ludeng  from './../../../assets/img/路灯.png';
import jingguandeng  from './../../../assets/img/景观灯.png';
import anquanwenming  from './../../../assets/img/安全文明施工.png';
import xiezi  from './../../../assets/img/写字.png';
import AMap from './../../../components/amap'
import 'weui';
import 'react-weui/build/packages/react-weui.css';

import {Control} from 'react-keeper';

class Dgzsedit extends React.Component {

  constructor(props) {
    super(props);
    this.setPosition = this.setPosition.bind(this);
    this.addFiles = this.addFiles.bind(this);
    this.showFiles = this.showFiles.bind(this);
    this.hideFiles = this.hideFiles.bind(this);
    this.tsnrChange = this.tsnrChange.bind(this);
    this.yjlxChange = this.yjlxChange.bind(this);
    this.titleChange = this.titleChange.bind(this);
    this.uploadSuggestion = this.uploadSuggestion.bind(this);
    this.hideConfirm = this.hideConfirm.bind(this);
    this.editMode = this.editMode.bind(this);
    this.delFiles = this.delFiles.bind(this);
    this.ok = this.ok.bind(this);
    this.goList = this.goList.bind(this);
  }

  goList() {
    Control.go(-1, 1);
  }

  ok() {
    Actions.hideConfirm();
    Actions.showLoading();
    if (this.state.dgzsedit.isMy) {
      if (this.state.dgzsedit.editable) {
        Actions.uploadSuggestion(this.goList);
      } else {
        Actions.onFallBackSuggestion(this.goList);
      }
    }
  }

  hideConfirm() {
    Actions.hideConfirm(this.state.dgzsedit.entity.position);
  }

  uploadSuggestion() {

    if ('' == this.state.dgzsedit.entity.viewdesc) {
      Actions.showWarn('请输入详细描述!');
    } else if ('' == this.state.dgzsedit.entity.title) {
      Actions.showWarn('请输入标题标题!');
    } else {
      Actions.showConfirm();
    }
  }

  delFiles(e, id) {
    Actions.showLoading();
    Actions.delFiles(id)
  }

  tsnrChange() {
    Actions.tsnrChange(event.target.value);
  }

  yjlxChange() {
    Actions.yjlxChange(event.target.value);
  }

  titleChange() {
    Actions.titleChange(event.target.value);
  }

  editMode() {
    Actions.editMode();
  }

  hideFiles() {
    Actions.hideFiles();
  }

  setPosition(obj) {
    Actions.setPosition(obj);
  }

  addFiles(file) {
    Actions.showLoading();
    Actions.addFiles(file);
  }

  showFiles(e, file, index) {
    Actions.showLoading();
    Actions.showFiles(index);
  }

  renderGallery() {
    if (!this.state.dgzsedit.gallery.show) {
      return false
    }

    let srcs = this.state.dgzsedit.files.map(file=>file.url);

    if (this.state.dgzsedit.editable) {
      return (
        <Gallery
          defaultIndex={this.state.dgzsedit.gallery.id}
          show={this.state.dgzsedit.gallery.show}
          src={srcs}>
          <Button
            style={{display: 'inline-block',
                    width: 'auto',
                    color: 'white',
                    border: 'none',
                    position: 'absolute',
                    top: '5px',
                    left: '15px'}}
            onClick={ this.hideFiles }
            plain>
            返回
          </Button>

          <GalleryDelete onClick={ this.delFiles }/>
        </Gallery>
      )
    } else {
      return (
        <Gallery
          defaultIndex={this.state.dgzsedit.gallery.id}
          show={this.state.dgzsedit.gallery.show}
          src={srcs}>
          <Button
            style={{display: 'inline-block',
                    width: 'auto',
                    color: 'white',
                    border: 'none',
          }}
            onClick={ this.hideFiles }
            plain>
            返回
          </Button>
        </Gallery>)
    }
  }

  render() {

    return (
      <Page className="dgzsedit" infiniteLoader={false} ptr={false}>

        <InfiniteLoader id="infs" ref="infs" height={window.innerHeight-152}
                        onLoadMore={(resolve, finish)=>{finish();} }
                        loaderDefaultIcon=''>
          <Panel>
            <PanelHeader>
              <div className="title-bg"/>
              标题
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell>
                  <CellHeader>
                    <img src={xiezi}
                         style={{
                     width: '20px',
                     marginRight: '15px',
                     display: 'block'
                   }}/>
                  </CellHeader>
                  <CellBody>
                    <Input type="text" disabled={this.state.dgzsedit.editable?false:"disabled"}
                           onChange={this.titleChange}
                           value={this.state.dgzsedit.entity.title} placeholder="请输入标题名称"/>
                  </CellBody></Cell>
              </MediaBox></PanelBody>
          </Panel>
          <Panel>
            <PanelHeader>
              <div className="title-bg"/>
              当前位置
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell onClick={e=>{this.state.dgzsedit.editable?this.refs.amap.getCurrentPosition():''}}>
                  <CellHeader>
                    <img src={zb}
                         style={{
                          width: '20px',
                          marginRight: '5px',
                          display: 'block'
                      }}/>
                  </CellHeader>
                  <CellBody>
                    <Input type="text" disabled="disabled"
                           value={this.state.dgzsedit.entity.location} placeholder="请选择你所在的位置"/>
                  </CellBody>
                </Cell>
              </MediaBox>
            </PanelBody>
          </Panel>
          <Panel>
            <PanelHeader>
              <div className="title-bg"/>
              现场照片
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Uploader disabled={this.state.dgzsedit.editable?false:"disabled"}
                          title=""
                          className="up-div"
                          maxCount={8}
                          files={this.state.dgzsedit.files}
                          onChange={this.addFiles}
                          onFileClick={this.showFiles}
                />
              </MediaBox>
            </PanelBody>
          </Panel>
          <Panel>
            <PanelHeader>
              <div className="title-bg"/>
              问题描述
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell>
                  <CellHeader>
                    <img src={ht}
                         style={{
                          width: '20px',
                          marginRight: '5px',
                          display: 'block'
                      }}/>
                  </CellHeader>
                  <CellBody>
                  <TextArea disabled={this.state.dgzsedit.editable?false:"disabled"} showCounter={false}
                            placeholder="请输入详细描述"
                            rows="5" value={this.state.dgzsedit.entity.viewdesc}
                            onChange={this.tsnrChange}></TextArea>
                  </CellBody>
                </Cell>
              </MediaBox>
            </PanelBody>
          </Panel>
          <Panel>
            <PanelBody>
              <PanelHeader>
                <div className="title-bg"/>
                意见类型
              </PanelHeader>
              <MediaBox type="small_appmsg">
                <Form radio>
                  <FormCell radio>
                    <CellHeader>
                      <img src={ludeng}
                           style={{
                           width: '20px',
                           marginRight: '5px',
                           display: 'block'
                         }}/>
                    </CellHeader>
                    <CellBody>
                      <div style={{fontSize:'16px'}}>路灯</div>
                    </CellBody>
                    <CellFooter>
                      <Radio onClick={this.state.dgzsedit.editable?this.yjlxChange:""} value="1"
                             checked={this.state.dgzsedit.entity.suggesttype==1} defaultChecked/>
                    </CellFooter>
                  </FormCell>
                  <FormCell radio>
                    <CellHeader>
                      <img src={jingguandeng}
                           style={{
                           width: '30px',
                           marginLeft:'-5px',
                           marginRight: '1px',
                           display: 'block'
                         }}/>
                    </CellHeader>
                    <CellBody>
                      <div style={{fontSize:'16px'}}>景观灯</div>
                    </CellBody>
                    <CellFooter>
                      <Radio name="suggesttype" checked={this.state.dgzsedit.entity.suggesttype==2}
                             onClick={this.state.dgzsedit.editable?this.yjlxChange:""} value="2"/>
                    </CellFooter>
                  </FormCell>
                  <FormCell radio>
                    <CellHeader>
                      <img src={anquanwenming}
                           style={{
                           width: '30px',
                           marginLeft:'-5px',
                           marginRight: '1px',
                           display: 'block'
                         }}/>
                    </CellHeader>
                    <CellBody>
                      <div style={{fontSize:'16px'}}>安全文明施工</div>
                    </CellBody>
                    <CellFooter>
                      <Radio name="suggesttype" checked={this.state.dgzsedit.entity.suggesttype==3}
                             onClick={this.state.dgzsedit.editable?this.yjlxChange:""} value="3"/>
                    </CellFooter>
                  </FormCell>
                  <FormCell radio>
                    <CellHeader>
                      <img src={yuanlinlvhua}
                           style={{
                           width: '30px',
                           marginLeft:'-5px',
                           marginRight: '1px',
                           display: 'block'
                         }}/>
                    </CellHeader>
                    <CellBody>
                      <div style={{fontSize:'16px'}}>园林绿化</div>
                    </CellBody>
                    <CellFooter>
                      <Radio name="suggesttype" checked={this.state.dgzsedit.entity.suggesttype==4}
                             onClick={this.state.dgzsedit.editable?this.yjlxChange:""} value="4"/>
                    </CellFooter>
                  </FormCell>
                </Form>

              </MediaBox>
            </PanelBody>
          </Panel></InfiniteLoader>
        <div style={{backgroundColor:'#fff'}}>
          <Cell>
            <CellBody>
              <ButtonArea>
                {this.state.dgzsedit.isMy ?
                  <Button onClick={this.uploadSuggestion}>
                    {this.state.dgzsedit.editable ? '提交' : '撤销'}
                  </Button>
                  :
                  <Button onClick={this.editMode}>
                    我要说
                  </Button>
                }

                <Button onClick={this.goList} style={{
                          backgroundColor:"rgba(22, 155, 213, 1)"
                        }}>我的发现</Button>
              </ButtonArea>
            </CellBody>
          </Cell>
        </div>

        <Toptips type="warn" show={this.state.dgzsedit.showWarn}>{this.state.dgzsedit.errorMsg}</Toptips>
        <AMap ref="amap" onSetPosition={this.setPosition} position={this.state.dgzsedit.position}></AMap>
        <Toast icon="success-no-circle" show={this.state.dgzsedit.showSuccess}>成功</Toast>
        <Toast icon="loading" show={this.state.dgzsedit.showLoading}>载入中...</Toast>
        <Dialog type="ios" title="确认操作" buttons={[
                {
                  type: 'default',
                  label: '取消',
                  onClick: this.hideConfirm
                },
                {
                  type: 'primary',
                  label: '确定',
                  onClick: this.ok
                }
              ]} show={this.state.dgzsedit.dialogShow}>
          您确定要进行此操作吗？
        </Dialog>
        {this.renderGallery()}
      </Page>
    );
  }

  componentDidMount() {

    if (!Control.state.dataDetail) {
      Actions.editMode();
    } else {
      Actions.loadMode(Control.state.dataDetail);
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.dgzsedit || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }
}

ReactMixin.onClass(Dgzsedit, Reflux.connect(Store, 'dgzsedit'));


export default Dgzsedit ;
